<template>
  <card-slot class="center rojects">
    <template #title>
      <div class="w-[150px]">🎯 projects</div>
    </template>

    <template #page>
      <div>05</div>
    </template>

    <div class="rojects-main">
      <Projects-list :mainList="mainList" />

      <div class="break-inside-avoid-column mb-5 lg:mr-5">
        <n-card title="🌈 更多项目" hoverable>
          <n-empty description="MORE">
            <template #extra>
              <n-button size="small" @click="navigateTo(`/projects`)">
                看看别的
              </n-button>
            </template>
          </n-empty>
        </n-card>
      </div>
    </div>
  </card-slot>
</template>

<script lang="ts" setup>
const mainList = ref([
  {
    title: "🌈 nuxt3主页管理端",
    type: 1,
    describe:
      "一款免费开源的个人主页系统，基于Vue3、Express、MongoDB、JavaScript，项目代码简洁统，基于Vue3、Express、MongoDB、JavaScript，项目代码简洁统，基于Vue3、Express、MongoDB、JavaScript，项目代码简洁统，基于Vue3、Express、MongoDB、JavaScript，项目代码简洁,注释丰富,上手容易；同时还提供了一系列功能丰富的组件和工具，帮助开发者搭建个人主页简历网站和开发管理后台应用的前后端分离完整系统。",
    points: " Vue 3 Vite Ant Design Vue 3 JavaScript Pinia Hooks和vue-router",
  },
  {
    title: "🌈 nuxt3主页管理端",
    type: 2,
    describe:
      "一款免费开源的个人主页系统，基于Vue3、Express、MongoDB、JavaScript，项目代码简洁,注释丰富,上手容易；同时还提供了一系列功能丰富的组件和工具，帮助开发者搭建个人主页简历网站和开发管理后台应用的前后端分离完整系统。",
    points: " Vue 3 Vite Ant Design Vue 3 JavaScript Pinia Hooks和vue-router",
  },
  {
    title: "🌈 nuxt3主页管理端",
    type: 3,
    describe:
      "一款免费开源的个人主页系统，基于Vue3、Express、MongoDB、JavaScript，项目代码简洁,注释丰富,上手容易；同时还提供了一系列功能丰富的组件和工具，帮助开发者搭建个人主页简历网站和开发管理后台应用的前后端分离完整系统。",
    points: " Vue 3 Vite Ant Design Vue 3 JavaScript Pinia Hooks和vue-router",
  },
  {
    title: "🌈 nuxt3主页管理端",
    type: 1,
    describe:
      "一款免费开源的个人主页系统，基于Vue3、Express、MongoDB、JavaScript，项目代码简洁,注释丰富,上手容易；同时还提供了一系列功能丰富的组件和工具，帮助开发者搭建个人主页简历网站和开发管理后台应用的前后端分离完整系统。",
    points: " Vue 3 Vite Ant Design Vue 3 JavaScript Pinia Hooks和vue-router",
  },
  {
    title: "🌈 nuxt3主页管理端",
    type: 1,
    describe:
      "一款免费开源的个人主页系统，基于Vue3、Express、MongoDB、JavaScript，项目代码简洁,注释丰富,上手容易；同时还提供了一系列功能丰富的组件和工具，帮助开发者搭建个人主页简历网站和开发管理后台应用的前后端分离完整系统。",
    points: " Vue 3 Vite Ant Design Vue 3 JavaScript Pinia Hooks和vue-router",
  },
]);
</script>

<style lang="less" scoped>
.rojects {
  margin-top: 30px;

  .rojects-main {
    column-count: 2;
    column-gap: 20px;
  }
}

@media screen and (max-width: 900px) {
  .rojects-main {
    column-count: 1 !important;
  }
}
</style>
